@charset "utf-8";

*{
    margin: 0;
    padding:0;
}
body{
        height: 100%;
        background-color:#222222;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
}
.message{
    height: auto;
    width: 500px;
}
.photos{
    height: 300px;
    width: 300px;
    position: fixed;
    left: 200px;
    top: 100px;
    background-color: white;
    border-radius: 5px;
}
.songimg{
    height: 100%;
    width: 100%;
    border-radius: 5px;
}
#songnamediv{
    height: 30px;
    width: 350px;
    border-radius: 5px;
    background-color: #222222;
    position: fixed;
    top: 314px;
    left: 200px;
}
#songname{
    letter-spacing:1.5px;
    color:#e4e4e4; 
}
#songerdiv{
    height: 30px;
    width: 260px;
    border-radius: 5px;
    background-color: #222222;
    position: fixed;
    top: 436px;
    left: 200px;
}
#songer{
    letter-spacing:0.5px;
    color:#e4e4e4; 
}
#albumdiv{
    height: 30px;
    width: 100px;
    border-radius: 5px;
    background-color: #222222;
    position: fixed;
    top: 378px;
    left: 200px;
}
#album{
    letter-spacing:0.5px;
    color:#e4e4e4; 
}
h2:hover{
    text-decoration:underline;
}
h3:hover{
    text-decoration:underline;
}
a:hover{
    text-decoration:underline;
}
    /*
      样式简单写了下，大概就是
      progress-box： 写一个固定的宽度，用相对定位，写个边框颜色
      progress： 写个背景颜色，宽度随 js 改变即可
     */
     * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      
      .video-box {
        width: 100%;
        height: auto;
      }
      video {
        width: 100%;
      }
      .ctrl-box {
        width: 20%;
        margin: 0px auto;
        position: fixed;
        top: 490px;
        left: 198px;
    }
    .ctrl-box .progress-box {
        position: relative;
        height: 10px;
        margin-bottom: 10px;
        background: rgb(255, 255, 255);
        border-radius: 8px;
        border: 1px solid rgb(218, 222, 222);
        overflow: hidden;
        cursor: pointer;
    }
      .ctrl-box .progress-box .progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background: rgb(131, 175, 155);
      }
      .ctrl-box .play-btn {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
        color: #e4e4e4;
      }
      .ctrl-box .progress-time {
        display: inline-block;
        color: #e4e4e4;
      }
      video {
        position: fixed;
        right: 0px;
        bottom: 0px;
        max-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
    }
/* 评论 */
    .commentbody{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0px;
        left: 600px;
        /* align-items: center; */
        color: white;
    }
    #main{
        padding: 20px;
        /* margin-bottom: 0px; */
        flex: 1;
        width: 70%;
    }
    #table_{
        padding: 20px;
        flex: 1;
        width: 70%;
    }
    #font{
        padding: 10px;
        flex: 1;
        width: 60%;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
    }
    #typing{
        flex: 1;
        width: 700px;
        height: 200px;
        height: 20vh;
        border: red;
        font-size:large;
        background-color: rgb(216, 216, 216);
    }
    #commend{
        flex: 1;
        width: 80%;
    }
    #btn{
        width: 80px;
        height: 30px;
        border: 1% solid rgb(255, 255, 255);
        background: rgb(255, 255, 255);
    }
    #btn:hover{
        border: 1% solid rgba(108, 108, 108, 0.7);
        background: rgba(108, 108, 108, 0.7);
    }